<template>
  <div class="home">
    <header>
       <p></p>
       <p>{{title}}</p>
       <p></p>
     </header>
     <router-view></router-view>
     <nav>
       <ul>
         <li>
            <router-link to = '/home' :class="{active:active=='home'}">
              <p><i class="fa fa-twitch"></i></p>
              <p>首页</p>
            </router-link>
         </li>
         <li>
         <router-link to = '/zhushou' :class="{active:active=='zhushou'}">
              <p><i class="fa fa-ambulance"></i></p>
              <p>助手</p>
          </router-link>
         </li>
         <li>
           <router-link to = '/mine' :class="{active:active=='mine'}">
              <p><i class="fa fa-hacker-news"></i></p>
              <p>我</p>
           </router-link>
         </li>
       </ul>
       <!-- <router-view></router-view> -->
     </nav>

  </div>
</template>

<script>
export default {
  name: 'homeIndex',
  data () {
    return {
      active: 'home',
      title: ''
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang = 'less'>
@import '.././assets/less/style.less';
@import '../assets/font-awesome/css/font-awesome.min.css';
.home {
  height: 100%;
  background: #f7f7f7;
  header {
   .px2rem(height,88);
    background: #21d094;
    display: flex;
    align-items: center;
    justify-content: center;
    /* .border(1,solid,#000); */
    p {
      .font(30,#fff);
    }
  }
  nav {
    .px2rem(height,98);
    /* .border(1,solid,#000); */
    background: #fff;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    ul {
      height: 100%;
      display: flex;
      li {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        &:nth-child(1){
          a:nth-child(1){
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              .px2rem(height,39);
              .px2rem(width,39);
            }
          }
        }
        &:nth-child(2){
          a:nth-child(1){
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              .px2rem(height,36);
              .px2rem(width,36);
            }
          }
        }
        &:nth-child(3){
          a:nth-child(1){
            display: flex;
            flex-direction: column;
            align-items: center;
            img {
              .px2rem(height,38);
              .px2rem(width,34);
            }
          }
        }
        .active{
          p{
            color:#1fd195;
          }
        }
      }
    }
  }
}

</style>
